<!--学员成绩单打印-->
<template>
  <div class="wrapper-container" style="width:100%">
    <div class="search-container" style="margin:0"> 
      <div class="searchInfo">
        <span>学期：</span>
        <el-select
          v-model="xq"
          style="width: 150px"
          size="mini"
          placeholder="请选择"
          clearable
        >
        <!-- @clear="Tjkcqueryallscore" -->
          <el-option
            v-for="item in xqList"
            :key="item.value"
            :label="item.xqmc"
            :value="item.xqmc"
          >
          </el-option>
        </el-select>
      </div>
      <div class="searchInfo">
        <span>培养层次：</span>
        <el-select
          v-model="level"
          style="width: 120px"
          size="mini"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in levelList"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="searchInfo">
        <span>队别：</span>
        <el-select
          v-model="dd"
          style="width: 150px"
          size="mini"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in ddList"
            :key="item.id"
            :label="item.deptName"
            :value="item.deptName"
          >
          </el-option>
        </el-select>
      </div>
      <div class="searchInfo">
        <span>专业班次：</span>
        <el-select
          v-model="gClass"
          style="width: 150px"
          size="mini"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in gClassList"
            :key="item.id"
            :label="item.className"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="searchInfo">
        <span>学号：</span>
        <el-input
          style="width: 160px"
          size="mini"
          placeholder="请输入内容"
          v-model="studentid"
          clearable
        ></el-input>
      </div>
      <div class="searchInfo">
        <span>姓名：</span>
        <el-input
          style="width: 160px"
          size="mini"
          placeholder="请输入内容"
          v-model="name"
          clearable
        ></el-input>
      </div>
      <div class="search-button" style="margin:2px 0 0 0" @click="Tjkcqueryallscore">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </div>
    <div class="table-container">
      <div style="display: flex; width: 100%">
        <table style="width:100%">
          <tr>
            <td style="width:50%" valign="top">
              <el-table
                :data="tableData"
                max-height="600"
                class="xpaas-table-class"
                row-class-name="xpaas-row-class"
                cell-class-name="xpaas-cell-class"
                header-row-class-name="xpaas-header-row-class"
                header-cell-class-name="xpaas-header-cell-class"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="delete" label="操作" align="center">
                  <template slot-scope="scope">
                    <div class="lucj-import-button" @click="details(scope.row)" style="cursor: pointer;width:70px;height:28px;line-height:28px;margin:0 auto;border-radius:6px;border: 1px solid rgb(2, 200, 108);
                      color: rgb(2, 200, 108);
                      background: rgb(241, 255, 248);">
                      <!-- <img src="../../../assets/assessment/删除.png" alt="" /> -->
                      <span style="margin: 0 0 0 5px;">预 览</span>
                    </div>
                    <!-- <el-button type="danger" plain style="max-width: 80px;height: 30px;line-height: 2px;" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button> -->
                  </template>
                  <!-- <ButtonItem
                    @click=""
                    :name="'删除'"
                    :link="''"
                    :icon="'el-icon-delete'"
                    :buttonColor="'red'"
                  ></ButtonItem> -->
                </el-table-column>
                <el-table-column prop="classes" label="级次" align="center">
                </el-table-column>
                <el-table-column
                  prop="cultivationLevel"
                  label="培养层次"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="practicetype" label="队别" align="center">
                </el-table-column>
                <el-table-column prop="majorclass" label="专业班次" align="center">
                </el-table-column>
                <el-table-column prop="studentid" label="学号" align="center">
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center">
                </el-table-column>
              </el-table>
            </td>
              <!-- <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="current"
                  :page-sizes="[5,10, 20, 30]"
                  :page-size="size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div> -->
            <td>
              <el-button
                @click="sureTran"
                style="margin:0 20px;background-color:#004ca7"
                type="primary"
                circle
              >
                <i
                  style="font-size: 30px;font-weight: bolder;"
                  class="el-icon-arrow-right"
                ></i>
              </el-button>
            </td>
            <td valign="top" style="width:50%">
              <el-table
                :data="tableData1"
                max-height="600"
                class="xpaas-table-class"
                row-class-name="xpaas-row-class"
                cell-class-name="xpaas-cell-class"
                header-row-class-name="xpaas-header-row-class"
                header-cell-class-name="xpaas-header-cell-class"
                @selection-change="handleSelectionChangeRight"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="delete" label="操作" align="center">
                  <template slot-scope="scope">
                    <div class="lucj-import-button" @click="deleteRow(scope.$index, scope.row)" style="cursor: pointer;width:70px;height:28px;line-height:28px;margin:0 auto;border-radius:6px;border:1px solid #ff3819;color: #ff3819;background: #ffefef;">
                      <!-- <img src="../../../assets/assessment/删除.png" alt="" /> -->
                      <span style="margin: 0 0 0 5px;">删 除</span>
                    </div>
                    <!-- <el-button type="success" plain style="max-width: 80px;height: 30px;line-height: 2px;" @click="details(scope.row)">预览</el-button> -->
                    </template> 
                <!--  <ButtonItem
                    @click=""
                    :name="'预览'"
                    :link="''"
                    :icon="'el-icon-delete'"
                    :buttonColor="'red'"
                  ></ButtonItem> -->
                </el-table-column>
                <el-table-column prop="classes" label="级次" align="center">
                </el-table-column>
                <el-table-column
                  prop="cultivationLevel"
                  label="培养层次"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="practicetype" label="队别" align="center">
                </el-table-column>
                <el-table-column prop="majorclass" label="专业班次" align="center">
                </el-table-column>
                <el-table-column prop="studentid" label="学号" align="center">
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center">
                </el-table-column>
              </el-table>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="bottom-blocks">
     <div class="download-buttons" @click="outputstudent">        
        <span>打 印</span>
      </div>
      <!-- <div class="ztcz-detail"  @click="showManualEntryDialog = true">
        <span>返回</span>
      </div> -->
    </div>
  </div>
</template>

<script>
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import { reqGetXqList,reqCheckLevelList,Tjkcqueryallscorejk,reqZybcList,reqXydList } from "@/api/admin1/check";
import { querydd,reqeditById,outputstudent } from "@/api/course/courses";
import { mapGetters } from "vuex";
export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
  },
  data() {
    return {
      current: 1,
      size: 5,
      total: "",
      xq:'',
      level:'',
      dd:'',
      gClass:'',
      studentid:'',
      name:'',
      xqList:[],
      levelList:[],
      ddList:[],
      gClassList:[],
      tableData: [],
      tableData1: [],
      multipleSelection: [],
      multipleSelectionRight:[],
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  mounted(){
    this.termAll();
    this.getLevelList();
    this.ddAll();
    this.specticyClass();
    this.Tjkcqueryallscore();
  },
  methods: {
    //左侧表格点击删除按钮
    deleteRow(index, rows) {
      this.tableData.push(rows)
      this.tableData1.splice(index, 1);
    },
    //右侧表格点击预览
    /* "kxzystate": "1",
    "ktcpstate": "1",
    "qzksstate": "1",
    "kzkhstate": "1",
    "oldstate": "2",
    "oldstate2": "2", */
    details(row){
      reqeditById(row.studentid).then(res=>{
        let data = res.data.data;
        if(res.data.code == 200 && data.kxzystate == '3' && data.ktcpstate == '3' && data.qzksstate == '3' && data.kzkhstate == '3' && data.oldstate == '3' && data.oldstate2 == '3'){
          localStorage.setItem('routethreeSign','addTestPage');
          localStorage.setItem('studentData',JSON.stringify(data));
          this.$router.push({
            path: "/teacher/courseAchievement/barcodeEntry", //要跳转的页面的路由
          });
        } else {
          this.$message({ type: "error", message: '该条课程成绩还在审核中！' });
        }
      })
    },
    // 点击页码更新数据
    /* handleCurrentChange(val) {
      this.current = val;
      this.Tjkcqueryallscore();
    }, */
    // 获取学期下拉框
    async termAll(){
      const result = await reqGetXqList();
      result.data.code == 200 ? this.xqList = result.data.data : [];
    },
    // 获取培养层次下拉框
    async getLevelList() {
      const result = await reqCheckLevelList('pylevel');
      result.data.code == 200 ? this.levelList = result.data.data[0].children : [];
    },
    // 获取队别下拉框
    async ddAll(){
      const result = await reqXydList();
      result.data.code == 200 ? this.ddList = result.data.data : [];
    },
    //获取专业班次
    async specticyClass(){
      const result = await reqZybcList();
      result.data.code == 200 ? this.gClassList = result.data.data : [];
    }, 
    //按条件查询
    Tjkcqueryallscore() {
      console.log(this.userInfo.role_id);
      let obj = {
        xueqi: this.xq,
        level: this.level,
        dd:this.dd,
        majorclass: this.gClass,
        studentid:this.studentid,
        name: this.name
      };
      return new Promise(() => {
        Tjkcqueryallscorejk(obj).then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
          }
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelectionChangeRight(val){
      this.multipleSelectionRight = val;
    },
    sureTran() {
      var temp = this.multipleSelection.map((item, index) => {
        return item.studentid;
      });
      this.tableData = this.tableData.filter((e) => !temp.includes(e.studentid));
      this.tableData1 = [...this.tableData1, ...this.multipleSelection];
    },
    outputstudent(){
      if(this.multipleSelectionRight.length <= 0){
        this.$message({
          type:'error',
          message:'请选择右侧表格中需要打印的学员数据！'
        })
      } else {
        let rightData = [];
        this.multipleSelectionRight.forEach(item=>{
          let obj = {
            "studentid":item.studentid,
            "name":item.name
          }
          rightData.push(obj);
        })
        outputstudent(rightData).then(res=>{
          console.log(res)
          if(200 === res.status) {
            var downloadElement = document.createElement('a');
            var href = window.URL.createObjectURL(res.data); 
            downloadElement.href = href;
            downloadElement.download = '学员成绩单汇总.zip'; 
            document.body.appendChild(downloadElement);
            downloadElement.style.display = 'none'
            downloadElement.click(); 
            document.body.removeChild(downloadElement); 
            window.URL.revokeObjectURL(href);
            this.Tjkcqueryallscore();
            this.tableData1 = []
            return "ok";
          } else {
            this.$message({ type: "error", message: res.data.data.msg });
          }
        });
      }
    }
  },
};
</script>
<style lang="less" scoped>
  /deep/.bottom-blocks {
    width: 20%;
    margin: 50px 40%;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: end;
    justify-content: space-around;
    .download-buttons{
      align-items: center;
      // width: 78px;
      // height: 28px;
      // line-height: 28px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      padding: 9px 22px;
          border-radius: 6px;
          cursor: pointer;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
         
          > span {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
           color: #f3b815;
          }
          
        }
          
    }
.search-container {
  justify-content: flex-start !important;
  
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 15px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";

.searchInfo{
  color: #004ca7;
  margin-right: 15px;
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}
/deep/.table-container {
  margin-top: 15px;
  display: -webkit-box;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: none;
  align-items: center;

  .table-data {
    min-height: 500px;
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
